Tree List How To's

How to's for the Tree List guide.

How to Use TreeList?

How to Use TreeList?

The following steps explain how to add and use a TreeList component on a form.

1. Adding the TreeList Component to a Form

1. Open the form design screen.
2. Go to the Toolbox panel.
3. Locate the TreeList component.
4. Drag and drop it onto the form.

2. Configuring the Data Source

TreeList is typically used with a data source that has a parent–child relationship.

Required fields:

• Id Field → The unique key of the row
• Parent Id Field → The field that defines the parent record
• Display Field → The field displayed to the user

With these fields defined, the tree structure is created automatically.

3. Defining the Root Structure

To define the top-level records in the TreeList, use:

• Root Value, or
• Root Value Type

These settings determine:

• Which records appear at the top level
• Where the tree structure starts

4. Auto Expand Configuration

• When Auto Expand All is enabled:
  • The entire hierarchy is expanded automatically when the form loads
• When disabled:
  • Users expand rows manually

5. Using Events

TreeList supports the following core events:

Form Save

• Triggered when the form is saved and TreeList data is processed

Row Change

• Triggered when the user switches to a different row

These events can be used to:

• Perform validations
• Dynamically update fields
• Execute business rules

6. Example Usage Scenario

Scenario:
A project task list is displayed using a TreeList.

• Main tasks → parent
• Sub-tasks → child

The user can:

• Expand tasks
• Select sub-tasks
• Update detail fields when the selected row changes
• Validate the entire task structure on form save

Tips

• Enabling Auto Expand All may affect performance in deep hierarchies
• The Row Change event can be triggered frequently; avoid heavy operations
• Combining Form Save and Row Change events enables powerful control mechanisms

---

What Is TreeList?

What Is TreeList?

TreeList is an advanced table component that displays data using a parent–child relationship.
Unlike a standard DataGrid, it enables hierarchical connections between rows, allowing multi-level data visualization.

With this structure, users can:

• Expand parent records to view child records
• Easily navigate through hierarchical data
• Perform operations on data organized in a tree structure

What Is It Used For?

TreeList is commonly used in the following scenarios:

• Organization charts (Department → Sub-department → Employee)
• Category / sub-category structures
• File and folder hierarchies
• Project tasks and sub-tasks
• Approval and authorization trees
• Product trees (BOM – Bill of Materials)

Key Features

• Hierarchical structure support (unlimited levels)
• Row expand / collapse (Expand / Collapse)
• Row-based selection
• Form Save and Row Change event support
• Works with dynamic or relational data sources
• Row add, delete, and update operations

Difference Between DataGrid and TreeList

Feature	DataGrid	TreeList
Flat table	Yes	No
Hierarchical data	No	Yes
Parent–child structure	No	Yes
Tree view	No	Yes

Notes

• TreeList works most efficiently with relational data models.
• It is ideal for large and multi-level hierarchical data structures.
• Powerful business logic can be implemented using form rules and events.

---

How to Auto Expand All Nodes?

What Is Auto Expand All?

When the Auto Expand All option is enabled, all parent–child structures in the TreeList are automatically expanded when the component is first loaded.

When Should It Be Used?

• When users need to see all data at once
• In small or medium-sized hierarchical structures
• In reporting and review screens

How to Use It?

1. Select the TreeList component
2. Go to the Properties panel
3. Enable the Auto Expand All option

Notes

• It may have a performance impact on large data sets
• Not recommended for very deep tree structures

---

How to Use Client Enabled?

What is Client Enabled?

Client Enabled is a property that defines whether a form control is active (enabled) on the client side when the form is first loaded.
If it is set to True, the control is immediately usable by the user.
If it is set to False, the control is disabled and cannot be interacted with until a specific condition or rule activates it.

This property is especially useful for controlling the user’s interaction flow and applying dynamic behaviors using the Rule Manager.

What Does It Do?

The property allows developers to:

• Control when a form control becomes interactive.
• Prevent users from entering or changing data until prerequisites are met.
• Dynamically enable or disable controls based on user input or logic.

Example Scenario — Conditional Activation

Scenario:
A form contains a checkbox called “I Accept Terms” and a text field called “Signature.”
The goal is to make the “Signature” field inactive until the user checks “I Accept Terms.”

Steps to Implement:

1. Select the “Signature” field in the form editor.

2. In the Properties panel, find the Client Enabled field.

3. Set the value to False — the field will now be disabled by default when the form loads.

4. Open the Rule Manager.

5. Add a new rule:

   Condition:

Action:

6. Save and publish the form.

Result:

• When the form loads, the “Signature” field is disabled.
• Once the user checks “I Accept Terms,” the field automatically becomes active and editable.

Behavior Summary

Property State	Description
True	The control is active and ready for user interaction when the form loads.
False	The control is disabled at load time and can be enabled dynamically via rules or code.

Notes & Best Practices

• Use the Client Enabled property to manage client-side interactivity without requiring server actions.
• Combine it with Rule Manager to define when and how controls become active.
• Remember: if server enablement is disabled, the client cannot enable the control even if Client Enabled is set to True.
• By default, this property is set to True (active).

Summary

Client Enabled improves form usability by letting developers control when and how users interact with form controls.
It is essential for creating responsive, condition-based form experiences where user actions dynamically change the form’s state.